<template>
    <div style="height: 100%;padding-top: 56px;">
        <navbar :title="detail.uptTitle"></navbar>
        <van-list
        v-model="isLoading"
        :finished="finished"
        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
        loding-text="loading"
        @load="getDetailList"
        >
            <div class="white-bg">
                <div class="img-box-02" style="position: relative;">
                    <img :src="appUrl + detail.upmImg" height="100%" alt="" class="img-blur"/>
                    <div class="black-box"></div>
                </div>
                <div class="clearfix word-box-02">
                    <p class="word-title-03">{{ detail.uptTitle }}</p>
                </div>
                <div class="white-bg module-box-29" style="position: relative;">
                    <span class="title">{{ $t('position_learning_job_introduction') }}</span><!--岗位简介-->
                    <p v-if="expand == false">{{ detail.uptDesc }}</p>
                    <p v-if="expand == true">{{ expandText(detail.uptDesc) }}...</p>
                    <p class="clearfix margin-top10" v-if="clickButton == true">
                        <span class="word-btn-01" style="float: right;" @click="viewAll()">{{ descBox == false ? $t('view_all') : $t('pack_up') }}</span><!--'查看全部''收起'-->
                    </p>
                </div>
            </div>
            <p class="font-size15 paddingLR15 white-bg" style="font-weight: bold;padding-top: 40px;">{{ $t('position_learning_curriculum_schedule') }}({{ total }})</p><!--课程列表-->
            <div class="detail-list">
                <div class="module-box-13" v-for="(course, index) in detailList" :key="index">
                    <!--有权限学习-->
                    <div v-if="course.isShow === true" @click="detailJump(course, 0)">
                        <div class="img-box learning-status-box">
                            <img :src="appUrl + course.itmIcon" alt="" style="width: 100%;"/>
                            <div class="listContent-img-status" v-if="course.appStatus">{{ typeTitle[course.appStatus] }}</div>
                        </div>
                        <div class="content-box">
                            <div class="word-clamp-2 font-size15"><i class="public-mobile-icon" :class="{'cur' : course.itmMobileInd === 'no'}"></i>{{ course.itmTitle }}</div>
                            <div>
                                <span>{{ getItemType(course.itmType, course.itmExamInd)}}</span>
                                <span><em class="people-num-icon"></em>{{ course.appCount?course.appCount:0 }}</span>
                            </div>
                        </div>
                    </div>
                    <!--无权限学习-->
                    <div v-if="course.isShow === false" @click="noPermission()">
                        <div class="img-box" style="position: relative;">
                            <img :src="appUrl + course.itmIcon" alt="" class="img-blur" style="width: 100%;"/>
                            <div class="black-box-02">
                                <i class="noPermission-icon"></i>
                            </div>
                        </div>
                        <div class="content-box">
                            <div class="word-clamp-2 font-size15"><i class="public-mobile-icon" :class="{'cur' : course.itmMobileInd === 'no'}"></i>{{ course.itmTitle }}</div>
                            <div>
                                <span>{{ courseType[course.itmType] }}</span>
                                <span><em class="people-num-icon"></em>{{ course.appCount?course.appCount:0}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--暂无数据-->
            <div class="box-table white-bg" style="width:100%;height:-webkit-fill-available;padding: 20px 0;" v-if="total === 0">
                <div class="box-table-cell" style="text-align: center;">
                    <div class="no-data">
                        <img src="../../../static/images/no-data.png" alt=""/>
                        <p class="color999">{{ $t('no_data') }}</p>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
export default {
    name: 'KeyPositionDetail',
    mixins: [mixin],
    data() {
        return {
            detail: {},
            detailList: [],
            pageNo: 1,
            total: 0,
            descBox: false, //简介框
            expand: false, //内容展开
            clickButton: false,
            typeTitle: {
                I: this.$t('cos_app_inprogress'), //进行中
                C: this.$t('cos_app_completed'), //已完成
                notIAndC: this.$t('cos_other'), //其他
                F: this.$t('cos_app_fail'), //未完成
                W: this.$t('cos_app_withdrawn'), //已放弃
                Pending: this.$t('cos_app_pending'), //审批中
                Waiting: this.$t('cos_in_wait_list') //等待队列
            },
            finished: false,
            isRefresh: false,
            isLoading: false
        };
    },
    methods: {
        onPulldownTop() {
            this.isRefresh = true;
            this.detailList = [];
            this.pageNo = 1;
            this.total = 0;
            setTimeout(() => {
                this.finished = false;
                this.$axios.all([this.getDetail(), this.getDetailList()]).then(this.$axios.spread((acct, perms) => {
                    this.isTop = true;
                }));
                this.isRefresh = false;
            }, 900);
        },
        onScroll(top) {
            // if (top > 10) {
            //     this.$refs.orderFullScreen02.$el.style.opacity = '0';
            //     this.$refs.orderFullScreen.$el.style.opacity = '1';
            // } else {
            //     this.$refs.orderFullScreen02.$el.style.opacity = '1';
            //     this.$refs.orderFullScreen.$el.style.opacity = '1';
            // }
        },
        getDetail() {
            this.$axios({
                method: 'GET',
                url: '/app/api/position-map/detail/positionInfo',
                params: {
                    upt_id: this.$route.params.id
                }
            }).then(res => {
                this.detail = res.data;
                this.textContent(this.detail.uptDesc);
            });
        },
        getDetailList() {
            this.$axios({
                method: 'GET',
                url: '/app/api/position-map/detail/itemList',
                params: {
                    uptId: this.$route.params.id,
                    pageNo: this.pageNo,
                    pageSize: 10
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    this.detailList = [...this.detailList, ...res.data.results];
                    this.total = res.data.totalRecord;
                    this.isLoading = false;
                    this.pageNo++;
                    if (this.detailList.length >= this.total) {
                        this.finished = true;
                    }
                }
            });
        },
        /*没有权限*/
        noPermission() {
            this.$toast(this.$t('no_permission'));
        },
        //查看全部
        viewAll() {
            this.descBox = !this.descBox;
            this.expand = !this.expand;
        },
        detailJump(course, tkhId) {
            let itmId = this.wbEncryptor(course.itmId);
            if (course.itmType === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: course.itmId, title: course.itmTitle}});
            } else if (course.itmType === 'CLASSROOM') {
                this.$router.push({path: `/certifiedCourse/${course.itmId}/0`});
            } else {
                //
                this.$router.push({path: `/course/${course.itmId}/${tkhId}`});
            }
        },
        expandText(text) {
            return text.slice(0, 60);
        },
        textContent(value) {
            let num = 0;
            for (let i = 0; i < value.length; i++) {
                if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                    num += 2;
                } else {
                    num += 1;
                }
            }
            if (num > 120) {
                this.expand = true;
                this.clickButton = true;
            } else {
                this.expand = false;
            }
        }
    },
    mounted() {
        this.getDetail();
        this.getDetailList();
    }
};
</script>

<style scoped lang="less">
    .word-box-02 {
        padding: 45px 15px 40px;
        margin-top: -150px;

    }
    .module-box-29 {
        width: calc(100% - 30px);
        box-sizing: border-box;
        background: #ffffff;
        margin: 0 auto;
        padding: 20px 15px;
        border-radius: 14px;
        position: relative;
        box-shadow:0 2px 4px #dddddd;
        .title{
            display: block;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
        }
    }
    .black-box{
        height: 150px;
    }
    .img-box-02 {
        height: 150px;
    }
    .img-box-02 img {
        height: 150px;
        width: 100%;
    }

</style>
